<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>评论</title>
		<meta name="Keywords" content="微信开发,微信支付,微信demo,demo下载">
		<meta name="description" content="微信开发">
		<jsp:include page="iconfont/iconfont.jsp" flush="true"/><!--动态包含-->
		<!--css,js-->
		<script type="text/javascript" src="<c:url value='/resources/js/jquery-1.10.2.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/resources/js/jquery.pagination.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/resources/js/layer/layer.js'/>"></script>
		<script type="text/javascript" src="http://cdn.bootcss.com/vue/1.0.26/vue.js'/>"></script>
		<link rel="stylesheet" type="text/css" href="<c:url value='/resources/js/layer/skin/layer.css'/>">
		<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/pagination.css'/>">
		<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/animate.css'/>">
		<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/style.css'/>">
		<style>
			*{margin:0;padding:0;}
			body{
				background: url(<c:url value='/resources/images/comment_bg.png'/>);
			}
			ul li{list-style:none;}
			.user-img{float: left;padding: 5px 10px;}
			.user-img img{width:50px;border-radius:50%;background:#fff;}
			.comment-body{
				
			}
			.comment-body p{
				margin:8px 0;
				margin-left: 72px;
			}
			.comment-body .comm{
				color:#333;
			}
			.comment-wrap h2{
				margin-top:60px;
			}
			.comment-wrap{
				width:700px;
				margin:0 auto;
				position: relative;
			}
			.user-name{
				font-size: 12px;
			}
			.comment-content{
				font-size: 1.2em;
				color:#EF4805;
			}
			.comment-date{
				font-size: 12px;
				float:right;
			}
			.comment-wrap .ico-list{
				position: absolute;
			    top: 0;
			    left: -85px;
			}
			.ico-list i{
				font-size: 1.8em;
			}
			.my-comment-box{margin-top: 20px;}
			.my-comment textarea{
				outline: none;
				border:none;
				width: 80%;
			    min-height: 62px;
			    padding: 8px;
			    color: #555;
			    font-size: 14px;
			    resize: none;
			    line-height: 18px;
			    font-family: "Microsoft YaHei";
			}
			.my-comment p .comment-btn{
				display: block;
				padding: 6px 10px;
				background:#EC0A0A;
				color: #fff;
			}
			.word-limit{
				position: absolute;
			    right: 76px;
			    bottom: 4px;
			    font-size: 12px;
			    color: #ccc;
			}
			#textarea-msg{border: 1px solid orange;}
			.comm-null-wrap{
			    text-align: center;
			    border: 2px dashed #B7B7B7;
			    padding: 30px 0;
			    color: #909090;
			    margin-top:20px;
			}
		</style>
	</head>
<body>
	<div class="comment-wrap">
	<h2>发表评论</h2>
	<div class="my-comment-box">
			<div class="user-img">
				<img src="<c:url value='/resources/images/man.png'/>">
			</div>
			<div class="my-comment" style="position: relative;">
				<textarea maxlength="100" id="textarea-msg" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥！" cols="60" rows="6"></textarea>
				<div class="word-limit"><span id="word-count">0</span>/100</div>
				<p style="position: absolute;right:70px; bottom:-46px;">
					<a href="javascript:void(0);" class="comment-btn">发表评论</a>
				</p>
			</div>
		<script type="text/javascript" src="<c:url value='/resources/js/user.js'/>"></script>
	</div>


	<div class="ico-list">
		<a style="color:orange;" href="list.html">列表页<i class="iconfont icon-liebiao"></i></a>
	</div>
		<h2>评论展示</h2>
		<div class="message-wrap">
			<ul class="comment">
				<!-- <li class="u-message">
					<div class="user-img">
						<img src="images/man.png">
					</div>
					<div class="comment-body">
						<p class="comm user-name" style="padding-top: 10px;">@孤独的心1856</p>
						<p class="comment-content">当有滚动条时，你往下拉就会知道 mask 的高度不应该是 body的100%，而是body的100%+， 所以一定要用document.documentElement.scrollHeight 来准确获取页面的高度当， 所以一定要用document.documentElement.scrollHeight 来准确获取页面的高度当rollHeight 来准确获取页面的高度</p>
						<p class="comm comment-date" style="margin:0 20px 20px 0;">时间：<span>2016-10-06</span></p>
						<div style="clear: both;"></div>
					</div>
					<div style="clear: both;"></div>
				</li> -->
			</ul>

		<div class="comm-null-wrap">
			还没有人评论哟！
		</div>


		</div>
		<div id="Pagination" class="pagination" style="margin:30px 0;"><!-- 这里显示分页 --></div>
		<!--<div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>-->
	</div>
	<script type="text/javascript">
	/*$(function(){
			var initPagination = function() {
			var num_entries = $(".comment li").length;
			// 创建分页
			$("#Pagination").pagination(num_entries, {
				num_edge_entries: 1, //边缘页数
				num_display_entries: 2, //主体页数
				callback: pageselectCallback,
				items_per_page:2 //每页显示1项
			});

		 }();
		 
			function pageselectCallback(page_index, jq){
				var new_content = $(".comment li:eq("+page_index+")").clone();
				$("#Searchresult").empty().append(new_content); //装载对应分页的内容
				return false;
			}
		})*/
	</script>
</body>
</html>
